<template>
	<div>
		<el-date-picker
			v-model="value2"
			type="daterange"
			unlink-panels
			range-separator="至"
			start-placeholder="请选择开始时间"
			end-placeholder="请选择结束时间"
			:shortcuts="shortcuts"
			size="large"
			value-format="YYYY-MM-DD"
			@change="changeDate"
		/>
	</div>
</template>

<script>
	export default{
		props:{
			dateVal:{
				type:Array,
				default:[]
			}
		},
		data(){
			return{
				shortcuts:[
				  {
				    text: '本周',
				    value: () => {
						const end = new Date()
						const today = new Date();
						const day = today.getDay(); // 获取今天是星期几，0（周日）到6（周六）
						const diff = today.getDate() - day + (day === 0 ? -6 : 1); // 计算周一的日期
						const start = new Date(today.setDate(diff))
						return [start, end]
				    },
				  },
				  {
				    text: '本月',
				    value: () => {
					  const now = new Date()
				      const end = new Date()
				      const start = new Date(now.getFullYear(), now.getMonth(), 1)
				      return [start, end]
				    },
				  },
				  {
				    text: '本年',
				    value: () => {
				     // 获取当前日期
				     const now = new Date();
				     // 获取当前年份
				     const currentYear = now.getFullYear();
				     // 创建当前年份的第一天（1月1日）
				     const start = new Date(currentYear, 0, 1); // 月份是从0开始的，所以0代表1月
				      const end = new Date(currentYear, 11, 31);
				      return [start, end]
				    },
				  },
				],
				value2:this.dateVal
			}
		},
		methods:{
			changeDate(e){
				this.$emit('dateRangeValue',e)
			},
			clearPickerValue(){
				this.value2 = ''
			} 
		}
	}
</script>
